$(function(){
  const token = localStorage.getItem('Atoken')

  const form = layui.form
  const laypage = layui.laypage

  let q = {
    type: 1,
    page: 1,
    limit: 10,
  }
  
  if(token === '') {
    layer.msg('请先登录')
  return $('.slinks').html(`<a href="login.html"><i class="fa fa-hand-o-right"></i>&nbsp;登录</a> |
  <a href="reg.html"><i class="fa fa-registered"></i>&nbsp;注册</a>`)
  } else{
    $.ajax({
      method: 'POST',
      url: '/user/getUserInfo',
      success: function(res) {
        console.log(res);
        const user = res.data.userInfo.username || res.data.userInfo.mobile
        $('.slinks').html(`<a data-v-697ed175="" href="#/user" class="router-link-exact-active router-link-active" aria-current="page">
        <i data-v-697ed175="" class="fa fa-user"></i>&nbsp; 您好${ user }，</a>
        <a data-v-697ed175="" class="fa fa-sign-out"></a>
        `)
       $('.user-info .text h3').html(`昵称 ${ user }<span><b>个性宣言</b>:${res.data.userInfo.notes ? res.data.userInfo.notes : '走自己的路，让人说去吧'}</span>`)
      }
    })
    
  }
  
  // 点击退出登录
  $('.slinks').on('click', '.fa', function(){
    location.href = './login.html'
    localStorage.removeItem('token')
  })

   // 格式化时间
   function formatTime(date) {
    const dt = new Date(date)
  
    var y = dt.getFullYear()
    var m = padZero(dt.getMonth() + 1)
    var d = padZero(dt.getDate())
  
    return y + '-' + m + '-' + d
  }
  
  // 定义补零的函数
  function padZero(n) {
    return n > 9 ? n : '0' + n
  }

  userCollect()
  function userCollect(){
    $.ajax({
      method: 'GET',
      url: '/user/userDataList',
      data: q,
      success: function(res) {
        console.log(res);
        if(res.errno !== 0) return layer.msg(errmsg)
        const { data:{ list:{ count, data}}} = res
        const htmlTpl = data.map(item => {
          const { author, catename, click, create_date, description, id, ishot, istop, keywords, lovenum, pic, tags, title } = item
          return `
          <article class="excerpt excerpt-one">
              <header>
                <a class="cat label label-important" href="">${ishot ? '热门' : '推荐'}<i class="label-arrow"></i></a>
                <h2>
                  <a target="_blank" href="show.html" title=${title}>${title}</a>
                </h2>
              </header>
              <p class="text-muted time">
                <a href="">${author}</a> 发布于 ${formatTime(create_date)}
              </p>
              <p class="focus">
                <a target="_blank" href="http://blog.weknow.cn/474.shtml" class="thumbnail">
                  <span class="item"><span class="thumb-span"><img src="http://124.223.14.236:8060/${pic ? pic : "pc/static/img/no-img.db17ba73.png"}"
                        class="thumb" /></span></span></a>
              </p>
              <p class="note">${description}
              </p>
              <p class="text-muted views">
                <span class="post-views">阅读(${click})</span>
                <span class="post-comments">评论(0)</span>
                <a href="javascript:;" class="post-like">
                  <i class="fa fa-thumbs-up"></i>赞 (<span>${lovenum}</span>)
                </a>
                <button class="btn btn-xs btn-danger" data-id="${id}"><i class="fa fa-trash"></i>&nbsp;取消收藏</button>
              </p>
            </article>
          `
        }).join('')
        $('.list-box').html(htmlTpl)
        renderPage(count)
      }
    })
  }

  // 分页
  function renderPage(total) {
    laypage.render({
      elem: 'page-box', //注意，这里的 test1 是 ID，不用加 # 号
      count: total, //数据总数，从服务端得到
      limit: q.limit, //  每页显示的条数。laypage将会借助 count 和 limit 计算出分页数
      curr: q.page, // 当前接口请求的是哪一页
      layout: [ 'count', 'limit', 'prev', 'page', 'next'], // 自定义排版
      limits: [ 10, 1, 2, 3, 4 ],  // 每页显示的条数。 laypage将会借助count 和 limit 计算出分页数
  
      // obj(当前分页的所有选项值) ,first (是否首次，一般用于初始加载的判断)
      jump: function(obj, first){
        //obj包含了当前分页的所有参数，比如：
        console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
        console.log(obj.limit); //得到每页显示的条数
        // 修改查询参数
        // 注意:当分页页码发生改变会触发jump回调，通过obj.curr得到当前用户点击的页码
        q.page = obj.curr
        //当用户选择了每页要请求的条数后，也会触发jump回调，
        // 通过obj.limit获取到用户选择的条数
        q.limit = obj.limit
        //首次不执行
        if(!first){
          //do something
          // 调用渲染表格方法请求数据
          userCollect()
        }
      }
    })
   }

  //  取消收藏
  $('.list-box').on('click', '.btn', function(){
    const id = $(this).data('id')
    // console.log('id', id)
    $.ajax({
      method: 'GET',
      url: '/user/userDataHandle',
      data: {
        type: 1,
        article_id: id,
        action: 'del'
      },
      success: function(res) {
        console.log(res);
        if(res.errno !== 0) return layer.msg(res.data)
        layer.msg(res.data)
        userCollect()
      }
    })

  })
})